<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RK3568智能控制中心</title>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ffffff;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
        input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ffffff;
            cursor: pointer;
            border: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div id="root"></div>
    
    <script type="text/babel">
        const { useState, useEffect } = React;

        // Lucide图标组件简化版
        const Icon = ({ d, size = 24, className = "" }) => (
            <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
                <path d={d} />
            </svg>
        );

        const Camera = ({ size, className }) => <Icon d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z M14.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" size={size} className={className} />;
        const Video = ({ size, className }) => <Icon d="M23 7l-7 5 7 5V7z M2 3h14v18H2z" size={size} className={className} />;
        const Circle = ({ size, className }) => <Icon d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" size={size} className={className} />;
        const Wind = ({ size, className }) => <Icon d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2" size={size} className={className} />;
        const Lightbulb = ({ size, className }) => <Icon d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5 M9 18h6 M10 22h4" size={size} className={className} />;
        const Cpu = ({ size, className }) => <Icon d="M4 4h16v16H4z M9 9h6v6H9z M9 1v3 M15 1v3 M9 20v3 M15 20v3 M20 9h3 M20 14h3 M1 9h3 M1 14h3" size={size} className={className} />;
        const Activity = ({ size, className }) => <Icon d="M22 12h-4l-3 9L9 3l-3 9H2" size={size} className={className} />;
        const Database = ({ size, className }) => <Icon d="M4 6c0-1.1 3.6-2 8-2s8 .9 8 2-3.6 2-8 2-8-.9-8-2zm0 0v6c0 1.1 3.6 2 8 2s8-.9 8-2V6m-16 6v6c0 1.1 3.6 2 8 2s8-.9 8-2v-6" size={size} className={className} />;
        const Settings = ({ size, className }) => <Icon d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" size={size} className={className} />;
        const Bell = ({ size, className }) => <Icon d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 0 1-3.46 0" size={size} className={className} />;
        const Play = ({ size, className }) => <Icon d="M5 3l14 9-14 9V3z" size={size} className={className} />;
        const Square = ({ size, className }) => <Icon d="M3 3h18v18H3z" size={size} className={className} />;

        function RK3568ControlPanel() {
            const [activeTab, setActiveTab] = useState('dashboard');
            const [ledStatus, setLedStatus] = useState(false);
            const [ledBrightness, setLedBrightness] = useState(50);
            const [fanStatus, setFanStatus] = useState(false);
            const [fanSpeed, setFanSpeed] = useState(50);
            const [fanReverse, setFanReverse] = useState(false);
            const [recording, setRecording] = useState(false);
            const [sensorData, setSensorData] = useState({
                temperature: 25.5,
                humidity: 60,
                light: 450,
                co2: 420,
                pressure: 1013,
                distance: 15
            });

            // 模拟传感器数据更新
            useEffect(() => {
                const interval = setInterval(() => {
                    setSensorData({
                        temperature: (25 + Math.random() * 5).toFixed(1),
                        humidity: (55 + Math.random() * 15).toFixed(0),
                        light: (400 + Math.random() * 200).toFixed(0),
                        co2: (400 + Math.random() * 100).toFixed(0),
                        pressure: (1010 + Math.random() * 10).toFixed(0),
                        distance: (10 + Math.random() * 20).toFixed(0)
                    });
                }, 2000);
                return () => clearInterval(interval);
            }, []);

            // CGI控制函数
            const controlLED = async () => {
                try {
                    const response = await fetch('/cgi-bin/led_control.cgi', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        body: `status=${ledStatus}&brightness=${ledBrightness}`
                    });
                    const result = await response.text();
                    console.log('LED控制结果:', result);
                } catch (error) {
                    console.error('LED控制失败:', error);
                }
            };

            const controlFan = async () => {
                try {
                    const response = await fetch('/cgi-bin/fan_control.cgi', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        body: `status=${fanStatus}&speed=${fanSpeed}&reverse=${fanReverse}`
                    });
                    const result = await response.text();
                    console.log('风扇控制结果:', result);
                } catch (error) {
                    console.error('风扇控制失败:', error);
                }
            };

            const TabButton = ({ id, icon: Icon, label }) => (
                <button
                    onClick={() => setActiveTab(id)}
                    className={`flex items-center gap-2 px-6 py-3 rounded-lg transition-all ${
                        activeTab === id
                            ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg'
                            : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
                    }`}
                >
                    <Icon size={20} />
                    <span className="font-medium">{label}</span>
                </button>
            );

            const SensorCard = ({ title, value, unit, icon: Icon, color }) => (
                <div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 shadow-xl border border-gray-700">
                    <div className="flex items-center justify-between mb-4">
                        <div className={`p-3 rounded-lg ${color}`}>
                            <Icon size={24} className="text-white" />
                        </div>
                        <div className="text-right">
                            <div className="text-3xl font-bold text-white">{value}</div>
                            <div className="text-sm text-gray-400">{unit}</div>
                        </div>
                    </div>
                    <div className="text-gray-300 font-medium">{title}</div>
                </div>
            );

            return (
                <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white">
                    {/* 顶部导航栏 */}
                    <nav className="bg-black/50 backdrop-blur-lg border-b border-gray-700 px-8 py-4">
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-3">
                                <div className="bg-gradient-to-r from-blue-500 to-purple-600 p-2 rounded-lg">
                                    <Cpu size={28} />
                                </div>
                                <div>
                                    <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
                                        RK3568控制中心
                                    </h1>
                                    <p className="text-xs text-gray-400">嵌入式智能控制系统</p>
                                </div>
                            </div>
                            <div className="flex items-center gap-4">
                                <div className="flex items-center gap-2 bg-green-500/20 px-4 py-2 rounded-lg border border-green-500/50">
                                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                                    <span className="text-green-400 text-sm font-medium">在线</span>
                                </div>
                                <button className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
                                    <Bell size={20} />
                                </button>
                                <button className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
                                    <Settings size={20} />
                                </button>
                            </div>
                        </div>
                    </nav>

                    {/* 标签页导航 */}
                    <div className="px-8 py-6">
                        <div className="flex gap-4 overflow-x-auto pb-2">
                            <TabButton id="dashboard" icon={Activity} label="仪表盘" />
                            <TabButton id="camera" icon={Camera} label="视频监控" />
                            <TabButton id="control" icon={Settings} label="设备控制" />
                            <TabButton id="system" icon={Database} label="系统信息" />
                        </div>
                    </div>

                    {/* 内容区域 */}
                    <div className="px-8 pb-8">
                        {activeTab === 'dashboard' && (
                            <div className="space-y-6">
                                {/* 传感器数据 */}
                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                    <SensorCard
                                        title="温度传感器"
                                        value={sensorData.temperature}
                                        unit="°C"
                                        icon={Activity}
                                        color="bg-gradient-to-br from-red-500 to-orange-500"
                                    />
                                    <SensorCard
                                        title="湿度传感器"
                                        value={sensorData.humidity}
                                        unit="%"
                                        icon={Circle}
                                        color="bg-gradient-to-br from-blue-500 to-cyan-500"
                                    />
                                    <SensorCard
                                        title="光照强度"
                                        value={sensorData.light}
                                        unit="Lux"
                                        icon={Lightbulb}
                                        color="bg-gradient-to-br from-yellow-500 to-amber-500"
                                    />
                                    <SensorCard
                                        title="CO2浓度"
                                        value={sensorData.co2}
                                        unit="ppm"
                                        icon={Wind}
                                        color="bg-gradient-to-br from-green-500 to-emerald-500"
                                    />
                                    <SensorCard
                                        title="气压"
                                        value={sensorData.pressure}
                                        unit="hPa"
                                        icon={Activity}
                                        color="bg-gradient-to-br from-purple-500 to-pink-500"
                                    />
                                    <SensorCard
                                        title="距离"
                                        value={sensorData.distance}
                                        unit="cm"
                                        icon={Circle}
                                        color="bg-gradient-to-br from-indigo-500 to-violet-500"
                                    />
                                </div>

                                {/* 快速控制面板 */}
                                <div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 shadow-xl border border-gray-700">
                                    <h3 className="text-xl font-bold mb-6 flex items-center gap-2">
                                        <Settings size={24} className="text-blue-400" />
                                        快速控制
                                    </h3>
                                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                                        <button
                                            onClick={() => setLedStatus(!ledStatus)}
                                            className={`p-6 rounded-xl transition-all ${
                                                ledStatus
                                                    ? 'bg-gradient-to-br from-yellow-500 to-orange-500 shadow-lg shadow-yellow-500/50'
                                                    : 'bg-gray-700 hover:bg-gray-600'
                                            }`}
                                        >
                                            <Lightbulb size={32} className="mx-auto mb-2" />
                                            <div className="text-sm font-medium">LED灯</div>
                                            <div className="text-xs opacity-75">{ledStatus ? '开启' : '关闭'}</div>
                                        </button>
                                        <button
                                            onClick={() => setFanStatus(!fanStatus)}
                                            className={`p-6 rounded-xl transition-all ${
                                                fanStatus
                                                    ? 'bg-gradient-to-br from-blue-500 to-cyan-500 shadow-lg shadow-blue-500/50'
                                                    : 'bg-gray-700 hover:bg-gray-600'
                                            }`}
                                        >
                                            <Wind size={32} className="mx-auto mb-2" />
                                            <div className="text-sm font-medium">风扇</div>
                                            <div className="text-xs opacity-75">{fanStatus ? '运行中' : '已停止'}</div>
                                        </button>
                                        <button className="p-6 rounded-xl bg-gray-700 hover:bg-gray-600 transition-all">
                                            <Camera size={32} className="mx-auto mb-2" />
                                            <div className="text-sm font-medium">摄像头</div>
                                            <div className="text-xs opacity-75">正常</div>
                                        </button>
                                        <button className="p-6 rounded-xl bg-gray-700 hover:bg-gray-600 transition-all">
                                            <Bell size={32} className="mx-auto mb-2" />
                                            <div className="text-sm font-medium">蜂鸣器</div>
                                            <div className="text-xs opacity-75">静音</div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        )}

                        {activeTab === 'camera' && (
                            <div className="space-y-6">
                                {/* 视频显示区 */}
                                <div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 shadow-xl border border-gray-700">
                                    <div className="aspect-video bg-black rounded-lg mb-4 flex items-center justify-center border-2 border-gray-700">
                                        {/* 替换为实际视频流: <img src="http://YOUR_IP:8080/?action=stream" className="w-full h-full object-cover rounded-lg" /> */}
                                        <div className="text-center">
                                            <Camera size={64} className="mx-auto mb-4 text-gray-600" />
                                            <p className="text-gray-500">视频流显示区域</p>
                                            <p className="text-sm text-gray-600 mt-2">mjpeg-streamer / gstreamer</p>
                                        </div>
                                    </div>
                                    <div className="flex gap-4">
                                        <button
                                            onClick={() => setRecording(!recording)}
                                            className={`flex items-center gap-2 px-6 py-3 rounded-lg font-medium transition-all ${
                                                recording
                                                    ? 'bg-red-600 hover:bg-red-700'
                                                    : 'bg-blue-600 hover:bg-blue-700'
                                            }`}
                                        >
                                            {recording ? <Square size={20} /> : <Video size={20} />}
                                            {recording ? '停止录制' : '开始录制'}
                                        </button>
                                        <button className="flex items-center gap-2 px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition-all">
                                            <Camera size={20} />
                                            拍照
                                        </button>
                                        <button className="flex items-center gap-2 px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium transition-all">
                                            <Play size={20} />
                                            播放
                                        </button>
                                    </div>
                                </div>
                            </div>
                        )}

                        {activeTab === 'control' && (
                            <div className="space-y-6">
                                {/* LED控制 */}
                                <div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 shadow-xl border border-gray-700">
                                    <h3 className="text-xl font-bold mb-6 flex items-center gap-2">
                                        <Lightbulb size={24} className="text-yellow-400" />
                                        LED灯控制
                                    </h3>
                                    <div className="space-y-4">
                                        <div className="flex items-center justify-between">
                                            <span className="text-gray-300">状态</span>
                                            <button
                                                onClick={() => {
                                                    setLedStatus(!ledStatus);
                                                    controlLED();
                                                }}
                                                className={`relative w-16 h-8 rounded-full transition-colors ${
                                                    ledStatus ? 'bg-yellow-500' : 'bg-gray-600'
                                                }`}
                                            >
                                                <div
                                                    className={`absolute top-1 left-1 w-6 h-6 bg-white rounded-full transition-transform ${
                                                        ledStatus ? 'translate-x-8' : ''
                                                    }`}
                                                />
                                            </button>
                                        </div>
                                        <div>
                                            <div className="flex items-center justify-between mb-2">
                                                <span className="text-gray-300">亮度</span>
                                                <span className="text-yellow-400 font-bold">{ledBrightness}%</span>
                                            </div>
                                            <input
                                                type="range"
                                                min="0"
                                                max="100"
                                                value={ledBrightness}
                                                onChange={(e) => setLedBrightness(e.target.value)}
                                                onMouseUp={controlLED}
                                                className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                                                style={{
                                                    background: `linear-gradient(to right, #facc15 0%, #facc15 ${ledBrightness}%, #374151 ${ledBrightness}%, #374151 100%)`
                                                }}
                                            />
                                        </div>
                                    </div>
                                </div>

                                {/* 风扇控制 */}
                                <div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 shadow-xl border border-gray-700">
                                    <h3 className="text-xl font-bold mb-6 flex items-center gap-2">
                                        <Wind size={24} className="text-blue-400" />
                                        风扇控制
                                    </h3>
                                    <div className="space-y-4">
                                        <div className="flex items-center justify-between">
                                            <span className="text-gray-300">状态</span>
                                            <button
                                                onClick={() => {
                                                    setFanStatus(!fanStatus);
                                                    controlFan();
                                                }}
                                                className={`relative w-16 h-8 rounded-full transition-colors ${
                                                    fanStatus ? 'bg-blue-500' : 'bg-gray-600'
                                                }`}
                                            >
                                                <div
                                                    className={`absolute top-1 left-1 w-6 h-6 bg-white rounded-full transition-transform ${
                                                        fanStatus ? 'translate-x-8' : ''
                                                    }`}
                                                />
                                            </button>
                                        </div>
                                        <div>
                                            <div className="flex items-center justify-between mb-2">
                                                <span className="text-gray-300">风速</span>
                                                <span className="text-blue-400 font-bold">{fanSpeed}%</span>
                                            </div>
                                            <input
                                                type="range"
                                                min="0"
                                                max="100"
                                                value={fanSpeed}
                                                onChange={(e) => setFanSpeed(e.target.value)}
                                                onMouseUp={controlFan}
                                                className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                                                style={{
                                                    background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${fanSpeed}%, #374151 ${fanSpeed}%, #374151 100%)`
                                                }}
                                            />
                                        </div>
                                        <div className="flex items-center justify-between">
                                            <span className="text-gray-300">反转</span>
                                            <button
                                                onClick={() => {
                                                    setFanReverse(!fanReverse);
                                                    controlFan();
                                                }}
                                                className={`relative w-16 h-8 rounded-full transition-colors ${
                                                    fanReverse ? 'bg-purple-500' : 'bg-gray-600'
                                                }`}
                                            >
                                                <div
                                                    className={`absolute top-1 left-1 w-6 h-6 bg-white rounded-full transition-transform ${
                                                        fanReverse ? 'translate-x-8' : ''
                                                    }`}
                                                />
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )}

                        {activeTab === 'system' && (
                            <div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 shadow-xl border border-gray-700">
                                <h3 className="text-xl font-bold mb-6 flex items-center gap-2">
                                    <Database size={24} className="text-green-400" />
                                    系统信息
                                </h3>
                                <div className="space-y-3 text-gray-300">
                                    <div className="flex justify-between border-b border-gray-700 pb-2">
                                        <span className="text-gray-400">主板型号</span>
                                        <span className="font-mono">RK3568</span>
                                    </div>
                                    <div className="flex justify-between border-b border-gray-700 pb-2">
                                        <span className="text-gray-400">系统</span>
                                        <span className="font-mono">Buildroot Linux</span>
                                    </div>
                                    <div className="flex justify-between border-b border-gray-700 pb-2">
                                        <span className="text-gray-400">Web服务器</span>
                                        <span className="font-mono">Boa</span>
                                    </div>
                                    <div className="flex justify-between border-b border-gray-700 pb-2">
                                        <span className="text-gray-400">视频流</span>
                                        <span className="font-mono">mjpeg-streamer / gstreamer</span>
                                    </div>
                                    <div className="flex justify-between border-b border-gray-700 pb-2">
                                        <span className="text-gray-400">通信模块</span>
                                        <span className="font-mono">Zigbee / WiFi</span>
                                    </div>
                                    <div className="flex justify-between border-b border-gray-700 pb-2">
                                        <span className="text-gray-400">运行时间</span>
                                        <span className="font-mono">2天 5小时 32分</span>
                                    </div>
                                    <div className="flex justify-between">
                                        <span className="text-gray-400">连接设备</span>
                                        <span className="font-mono text-green-400">6个传感器在线</span>
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            );
        }

        ReactDOM.render(<RK3568ControlPanel />, document.getElementById('root'));
    </script>
</body>
</html>